import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tools, Accordion } from 'weaver-mobile';
import { Comment, Reply } from 'weaver-mobile-page';
import WeaUtils from '../../../public/wea-utils';
import BlogComment from '../../public/BlogComment';

const getLabel = Tools.getLabel;

const store = [
  'blogHomeStore',
  'blogAttentionStore',
]

@withRouter
@inject(...store)
@observer
export default class MyAttention extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-center-attention-myAttention'
  }

  constructor(props) {
    super(props);
    this.state = {
      accordionIndex: 0, 
    }
  }

  remindAll = (workdate) => {
    const { blogAttentionStore: { sendRemindUnsubmitAll } } = this.props;
    sendRemindUnsubmitAll(workdate)
  }

  blogOverview = () => {
    const { prefixCls, blogAttentionStore: { countInfos, getCommentStore, commentStoreMap, setStoreState, sendRemindUnsubmitAll } } = this.props;
    const leftConfig = [
      { type: 'voice' },
      { type: 'blog-tupian' },
      { type: 'blog-xiangce' },
      { type: 'blog-biaoqing' },
    ];
    const rightConfig = { type: 'private', text: `${getLabel('83281','私密')}` };
    const renderTopContent = (data) => {
      {/* 公共样式，不需修改 */}
     if (data.content === '') {
       return <div className='blog-comment-content-unSubmit'>
         <Icon type='warning' size='xs'/>
         <span>{getLabel(384397,'未提交微博')}</span>
         </div>
     } else if(data.replenish) {
       return <div className='blog-comment-content-supplement'>
         <Icon type='blog-bujiao' size='xxs'/>
         <span>{data.replenishSpan}</span>
       </div>
     }
   }
    return (
      <div ref='overview' className={`${prefixCls}-overview-genOverview`}>
        <Accordion accordion defaultActiveKey='count0'
          className={`${prefixCls}-overview-genOverview-accordion`}
          onChange={(v)=> { v && this.setState({accordionIndex: v.substr(5) * 1})}}
        >
          {
            countInfos.map((item,index)=>{
              if (this.state.accordionIndex === index * 1) {
                setStoreState({workDate: item.workdate})
                getCommentStore(index)
              }
              
              return (
                <Accordion.Panel header={<AccordionHeader content={item} remind={()=>sendRemindUnsubmitAll(item.workdate)}/>} key={`count${index}`}>
                  {(commentStoreMap[index]) !== undefined && (
                    <div className='blog-blogComment'>
                      <Comment
                        store={commentStoreMap[index].blogCommentStore}
                        hasInitialListSize={true}
                        renderTopContent={data => renderTopContent(data)}
                      /> 
                      <Reply
                        store={commentStoreMap[index].reply}
                        hasInitialListSize={true}
                        leftConfig={leftConfig}
                        rightConfig={rightConfig}
                        placeholder={getLabel(18546,'回复内容...')}
                        visible={commentStoreMap[index].replyVisible}
                        onSubmit={commentStoreMap[index].saveComment}
                        onVisibleChange={commentStoreMap[index].setReplyVisible}
                      />
                    </div>
                  )
                  }
                </Accordion.Panel>
              )}
            )
          }
        </Accordion>
      </div>
    )
  }

  render() {
    const { prefixCls, isSearch } = this.props;
    return (
      <div className={`${prefixCls}-overview`}>
      { isSearch ? (
          <div className={`${prefixCls}-overview-overViewSearch`}>
            <BlogComment path="/userCenter/blogAttention/attention" id="attention" hasInitialListSize replyStore={this.props.blogAttentionStore} storeName='overview'/>
          </div> 
        ) :  this.blogOverview()
      }
      </div>
    )
  }
}

export class AccordionHeader extends React.Component {
 
  render() {
    let {workdateLocal, unsubmit, isCanRemind} = this.props.content;
    let {remind} = this.props;
    let _dateF1 = WeaUtils.DateFormat(workdateLocal,'M月dd日').replace('月',getLabel(33452,'月')).replace('日',getLabel(390,'日'));
    let _weekF1 = WeaUtils.DateFormat(workdateLocal,'周E').replace('周日',getLabel(16106,'周日')).replace('周一',getLabel(16100,'周一')).replace('周二',getLabel(16101,'周二'))
    .replace('周三',getLabel(16102,'周三')).replace('周四',getLabel(16103,'周四')).replace('周五',getLabel(16104,'周五')).replace('周六',getLabel(16105,'周六'));
    let clickFunc = (event) => {
      event.stopPropagation();
      remind()
    };
    return (<div className='accordion'>
      <span className='curdate'>{(WeaUtils.DateFormat(new Date(), 'yyyy-MM-dd') === workdateLocal) && getLabel(15537,'今天')}</span>
      {_dateF1}&nbsp;&nbsp;
      <span className='ml5'>{_weekF1}</span>
      {unsubmit > 0 && (<span className='orange pos-rel'><span className='dot-ml'>{`${unsubmit}`}{getLabel(384466,'人未提交')}</span></span>)}
      <span className='icons'>
        {(isCanRemind === 1)&&<Icon type='blog-fill' size='xs' onClick={clickFunc}/>}
      </span>
    </div>)
  }
}